$(function(){
    $('#keyword').on('keyup', function(){
        // 拿到输入框里面的值，而不是输入的那一个字
        var keyword = $(this).val();
        if(keyword !== '' && keyword !== null && keyword.length !== 0){
            $.ajax({
                type    :   'GET',
                url     :   'http://localhost:8080/csu_javaweb_group_assignment_war_exploded/productAuto?keyword='+keyword,
                success :   function (data){
                    console.log(data);
                    var productListHTML = '';
                    for(var i = 0; i < data.length; i ++) {
                        productListHTML += '<li class=\"productAutoItem\" data-productId="';
                        productListHTML += data[i].productId;
                        productListHTML += '">';
                        productListHTML += data[i].categoryId;
                        productListHTML += ': ';
                        productListHTML += data[i].name;
                        productListHTML += '</li>';
                    }
                    $('#productAutoList').html(productListHTML);
                    $('#productAutoComplete').show();
                },
                error: function (errorMsg){
                    console.log(errorMsg)
                }
            });
        } else {
            $('#productAutoComplete').hide();
        }
    })

    // 这里点击后没有反应是因为这是异步通讯的, 监听点击事件触发的时候, productAutoItem还没加载完成
    // 解决方案：利用冒泡绑定在父事件上(委托事件)
    // $('.productAutoItem').on('click', function (){
    //     console.log('aaa');
    // })

    $(document).on('click', '.productAutoItem', function(){
        var productId = $(this).data('productid'); // 注意这里是productid不是productId
        console.log(productId);
        $('#productAutoComplete').hide();
        $('#keyword').val('');
        window.location.href = 'http://localhost:8080/csu_javaweb_group_assignment/productForm?productId=' + productId;
    })

    // 鼠标进入时字体变红
    $(document).on('mouseenter', '.productAutoItem', function () {
        $(this).css('color', 'red'); // 改变字体颜色为红色
    });

    // 鼠标离开时恢复原来的字体颜色
    $(document).on('mouseleave', '.productAutoItem', function () {
        $(this).css('color', '#005121'); // 恢复为原来的颜色
    });


    // mouseleave   mouseout
    $('#productAutoComplete').on('mouseleave', function(){
        $(this).hide();
        $('#keyword').val('');
    })
})